import React, { PureComponent } from "react";
import { List, Button, notification } from "antd";
import Req from "../common/Req";
export default class OrderPage extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      settlementIds: [],
      totalPrice: 0,
      datas: [
        {
          name: "sdsds",
          imgUrl:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=611003720,1685646431&fm=27&gp=0.jpg",
          tenancy: 123456,
          count: 5,
          price: 12.99,
          specification: "100kg,180m",
          id: 222
        }
      ]
    };
  }

  loadDatas() {
    Req(
      "http://localhost:8080/order?userid=2&orderState=paid",
      {},
      this.props.history,
      resp => this.setState({ datas: resp.data })
    );
  }

  componentWillMount() {
    this.loadDatas();
  }

  render() {
    return (
      <div style={{ background: "#ffffff", marginTop: 20 }}>
        <List
          header={<div>我的订单</div>}
          footer={<div>请严格遵照《不平等条约》履行。</div>}
          bordered
          dataSource={this.state.datas}
          renderItem={item => (
            <List.Item>
              <div
                style={{
                  width: "100%",
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-between",
                  alignItems: "center"
                }}
              >
                <div>
                  <img
                    alt=""
                    style={{ width: 60, height: 60 }}
                    src={item.imgUrl}
                  />
                </div>
                <div>{item.name}</div>
                <div>规格：{item.specification}</div>
                <div>租赁时间：{item.tenancy}</div>
                <div>
                  状态：{item.state === "paid_using"
                    ? "租赁中"
                    : item.state === "paid_applying"
                      ? "申请归还中"
                      : "交易完成"}
                </div>
                <div>
                  {item.state === "paid_using" ? (
                    <Button
                      type="primary"
                      onClick={() => {
                        let params = { orderid: item.id };
                        //发起归还请求
                        Req(
                          "http://localhost:8080/order/reqrevert",
                          {
                            method: "POST",
                            headers: {
                              "Content-type": "application/json"
                            },
                            body: JSON.stringify(params)
                          },
                          this.props.history,
                          resp => {
                            if (
                              resp.code === 100 &&
                              resp.data.status === "SUCCESS"
                            ) {
                              this.loadDatas();
                              notification["success"]({
                                message: "请求成功",
                                description: "请等待卖家确认"
                              });
                            } else {
                              notification["error"]({
                                message: "请求失败",
                                description: "请稍后重试"
                              });
                            }
                          }
                        );
                      }}
                    >
                      发起归还
                    </Button>
                  ) : item.state === "paid_finish" ? (
                    <Button>评价</Button>
                  ) : null}
                </div>
              </div>
            </List.Item>
          )}
        />
      </div>
    );
  }
}
